<template>
	<view>
		<!-- 顶部提示 -->
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 用户栏 -->
		<view class="u-flex user-box">
			<!-- 头像 -->
			<view class="u-p-r-50 u-p-t-20">
				<u-avatar mode="circle" src="avatar(userInfo.avatar)" size="170"></u-avatar>
				<!-- <u-avatar mode="circle" :src="userInfo.avatar" size="170"></u-avatar> -->
			</view>
			<!-- 可点击范围 -->
			<view @click="judgeLogin" class="u-flex flex-direction:column">
				<view class="u-p-r-80">
					<view class="u-font-40 u-content-color u-p-b-15">{{userInfo.name}}</view>
					<view class="u-font-30 u-tips-color">学/工号：{{userInfo.username}}</view>
				</view>
				<view class="u-p-l-80">
					<u-icon name="arrow-right" color="#BEBFC4" size="35"></u-icon>
				</view>
			</view>
		</view>
		<!-- @click="navigateTo(item.url)" -->
		<!-- 附加功能栏 -->
		<view class="function_box padding wrap">
			<u-grid :col="4" :border="false" >
				<!-- 这里不建议for和if一起用 -->
				<u-grid-item v-for="(item,index) in upper_bar" :key="index"  @click="navigateTo(item.url)">
						<u-icon :name="item.src" :size="80"></u-icon>
						<view class="grid-text u-p-t-15">{{ item.name }}</view>
					
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="function_box padding wrap">
			<u-cell-group>
				<u-cell-item icon="star" title="待办任务"></u-cell-item>
				<u-cell-item icon="list-dot" title="历史任务"></u-cell-item>
				<u-cell-item icon="info-circle" title="关于项目" @click="navigateTo('/pages/about/index')"></u-cell-item>
				<u-cell-item icon="kefu-ermai" title="联系我们"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="function_box padding wrap">
			<u-cell-group>
				<u-cell-item @click="navigateTo('/pages/user/setting')" icon="setting" title="设置"></u-cell-item>
				<u-cell-item @click="printData()" icon="setting" title="lifeData测试"></u-cell-item>
				<u-cell-item @click="delAccessToken()" icon="setting" title="模拟refresh场景"></u-cell-item>
			
			</u-cell-group>
		</view>
		
		<view>
			<!-- 弹出窗口 -->
			<u-popup v-model="showInfo" mode="right" width=70% >
				<!-- 标题 -->
				<view class="padding-xs flex align-center">
					<view class="flex-sub text-center">
						<view class="text-xl padding">
							<text class="text-black text-bold">-个人信息详情-</text>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="u-m-t-20">
					<!-- 所有项目 -->
					<u-cell-group>
						<u-cell-item title="头像" @click="chooseAvatar">
							<u-avatar mode="circle" :src="avatar(userInfo.avatar)"></u-avatar>
						</u-cell-item>
						<u-cell-item title="姓名" :arrow="false">{{userInfo.name}}</u-cell-item>
						<u-cell-item title="学校" :arrow="false">{{userInfo.university}}</u-cell-item>
						<u-cell-item title="学/工号" :arrow="false">{{userInfo.username}}</u-cell-item>
						<u-cell-item title="性别" :arrow="false">{{userInfo.sex==1?'男':'女'}}</u-cell-item>
						<u-cell-item title="学院" :arrow="false">{{userInfo.department}}</u-cell-item>
						<u-cell-item v-if="userInfo.major" title="专业" :arrow="false">{{userInfo.major}}</u-cell-item>
						<u-cell-item v-if="userInfo.clazz" title="班级" :arrow="false">{{userInfo.clazz}}</u-cell-item>
						<u-cell-item title="年级" :arrow="false">{{userInfo.grade}}</u-cell-item>
						<u-cell-item title="教育层级" :arrow="false">{{userInfo.eduLevel}}</u-cell-item>
						<u-cell-item title="学制" :arrow="false">{{userInfo.schoolingLen}}</u-cell-item>
						<u-cell-item title="电话">{{userInfo.phone}}</u-cell-item>
						<u-cell-item title="(测试)deptId">{{deptId}}</u-cell-item>
					</u-cell-group>
				</view>
			</u-popup>
		</view>
		
	</view>
</template>


<script>
	
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				showInfo: false,
				// 附加功能栏
				upper_bar_all: [{
					name: '打卡历史',
					url: '/pages/clock_statistics/sub_sub_page?stu_id=' + this.$store.state.userInfo.name,
					src: 'order',
					lock: true
				},{
					name: '请假历史',
					url: '',
					src: 'order',
					lock: true
				},{
					name: '三进历史',
					url: '/pages/trienter_statistics/check',
					src: 'order',
					lock: false
				},{
					name: '附加功能',
					url: '',
					src: 'red-packet-fill',
					lock: true
				},{
					name: '附加功能',
					url: '',
					src: 'red-packet-fill',
					lock: true
				}]
			}
		},
		
		onLoad() {
			// ...mapState(['userInfo'])
			// let info = store.state
			
			// 进入页面就获取信息
			this.getUserInfo()
			
		},
		// created() {
		// 	// 监听从裁剪页发布的事件，获得裁剪结果
		// 	uni.$on('uAvatarCropper', path => {
		// 		this.avatar = path;
		// 		// 可以在此上传到服务端
		// 		uni.uploadFile({
		// 			url: 'http://www.example.com/upload',
		// 			filePath: path,
		// 			name: 'file',
		// 			complete: (res) => {
		// 				console.log(res);
		// 			}
		// 		});
		// 	})
		// },
		
		computed:{
			// ...mapState(['userInfo'])
			deptId() {
				return this.$store.state.deptId
			},
			userInfo() {
				// return uni.getStorageSync('lifeData')['userInfo']
				return this.$store.state.userInfo
			},
			hasPermission() {
				return this.$store.state.permission
			},
			// 控制upper_bar的个数始终为4
			upper_bar() {
				let res = []
				let i=0
				let permission = this.hasPermission
				while(res.length<4) {
					if (this.upper_bar_all[i].lock || permission) {
						res.push(this.upper_bar_all[i])
					}
					// console.log(i)
					i++;
				}
				return res
			}
		},
		methods: {
			avatar(url) {
				return '10.255.212.6' + url
			},
			getUserInfo() {
				// 基本信息获取
				let lifeData = uni.getStorageSync('lifeData')
				let that = this
				that.$u.api.getUserInfo(lifeData.userId).then(info => {
					console.log('用户信息', info.data)
					that.$u.vuex('userInfo', info.data)
					
					// 部门信息获取
					// 同步执行 防止that.$u.vuex('userInfo', info.data)该语句覆盖部门信息
					that.$u.api.getDeptList().then(msg => {
						let dept = msg.data
						let university = dept.pop().name
						that.$u.vuex('userInfo.university', university)
						console.log('部门信息', dept)
						that.$u.vuex('userInfo.department', dept[0].name)
						that.$u.vuex('userInfo.major', dept[1].name)
						that.$u.vuex('userInfo.clazz', dept[2].name)
					}).catch(err => {
						console.log(err)
					})
				}).catch(err => {
					console.log('信息报错', err)
				})
				
				// 角色权限判定
				that.$u.api.getUserPermission(lifeData.userId).then(res => {
					res.data.forEach(ele => {
						if (ele.roleId === 1) {
							that.$u.vuex('permission', true)
						}
					})
				}).catch(err => {
					console.log(err)
				})
				
			},
			navigateTo: function(url) {
				console.log("to", url)
				if (url == '') {
					// 底部的弹窗需要一个dom支持
					this.$refs.uTips.show({
						title: '敬请期待',
						type: 'error',
						duration: '2300'
					})
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
			delAccessToken() {
				let tmp = uni.getStorageSync('lifeData')
				tmp['access_token'] = ''
				uni.setStorageSync('lifeData', tmp)
				this.$store.state.access_token = ''
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			/*
				点击上方判断是否登录
				登录则获取信息
				未登录进行跳转
			*/ 
			judgeLogin(){
				// let access_token = uni.getStorageSync('lifeData').access_token
				let lifeData = uni.getStorageSync('lifeData')
				console.log(lifeData)
				
				if(lifeData === undefined || lifeData['userInfo'] === undefined){
					// 未登录，跳转登录界面
					this.navigateTo('/pages/user/login')
				}else{
					// 登陆了,显示信息
					this.showInfo = true
				}
			},
			printData() {
				console.log('life data', uni.getStorageSync('lifeData'))
			}
		}
	}
</script>

<style lang="scss">
page{
	background: linear-gradient(to bottom right, #ffffff, #efefef);
	
	.user-box{
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		justify-content:center;
		background: linear-gradient(to bottom, #ffffff, #f1f3fa);
		
	}
	
	.function_box{
		position: relative;
		top: -100rpx;
	}
}

</style>
